<template>
  <!-- ... 其他模板内容 ... -->
  
  <!-- 图表区域 -->
  <el-row :gutter="20" class="charts-row">
    <!-- 平台数据分布 -->
    <el-col :span="12">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>平台数据分布</span>
            <el-select v-model="platformChartType" size="small">
              <el-option label="评论数据" value="comments" />
              <el-option label="点赞数据" value="likes" />
              <el-option label="转发数据" value="shares" />
            </el-select>
          </div>
        </template>
        <div ref="platformChart" style="height: 300px"></div>
      </el-card>
    </el-col>

    <!-- 数据趋势图 -->
    <el-col :span="12">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>数据趋势</span>
            <el-radio-group v-model="trendTimeRange" size="small">
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="month">月</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <div ref="trendChart" style="height: 300px"></div>
      </el-card>
    </el-col>
  </el-row>

  <el-row :gutter="20" class="charts-row">
    <!-- 任务执行状态 -->
    <el-col :span="8">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>任务执行状态</span>
          </div>
        </template>
        <div ref="taskStatusChart" style="height: 300px"></div>
      </el-card>
    </el-col>

    <!-- 热门内容分析 -->
    <el-col :span="8">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>热门内容分析</span>
          </div>
        </template>
        <div ref="hotContentChart" style="height: 300px"></div>
      </el-card>
    </el-col>

    <!-- 账号健康度 -->
    <el-col :span="8">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>账号健康度</span>
          </div>
        </template>
        <div ref="accountHealthChart" style="height: 300px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 图表实例引用
const platformChart = ref(null)
const trendChart = ref(null)
const taskStatusChart = ref(null)
const hotContentChart = ref(null)
const accountHealthChart = ref(null)

// 控制变量
const platformChartType = ref('comments')
const trendTimeRange = ref('week')

onMounted(() => {
  // 初始化平台数据分布图（饼图）
  const platformChartInstance = echarts.init(platformChart.value)
  platformChartInstance.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center'
    },
    series: [{
      name: '平台分布',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      data: [
        { value: 1048, name: '抖音' },
        { value: 735, name: '快手' },
        { value: 580, name: '小红书' },
        { value: 484, name: '微博' },
        { value: 300, name: '其他' }
      ]
    }]
  })

  // 初始化数据趋势图（折线图）
  const trendChartInstance = echarts.init(trendChart.value)
  trendChartInstance.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['抓取数据量', '发布数量', '互动量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '抓取数据量',
        type: 'line',
        smooth: true,
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      },
      {
        name: '发布数量',
        type: 'line',
        smooth: true,
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '互动量',
        type: 'line',
        smooth: true,
        data: [320, 332, 301, 334, 390, 330, 320]
      }
    ]
  })

  // 初始化任务执行状态图（仪表盘）
  const taskStatusChartInstance = echarts.init(taskStatusChart.value)
  taskStatusChartInstance.setOption({
    series: [{
      type: 'gauge',
      progress: {
        show: true,
        width: 18
      },
      axisLine: {
        lineStyle: {
          width: 18
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        length: 15,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      pointer: {
        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.23010 2092.40383,617.34993 L2092.40383,617.34993 C2092.40383,618.46975 2091.48372,619.38987 2090.36389,619.38987 L2090.36389,619.38987 C2089.24406,619.38987 2088.32395,618.46975 2088.32395,617.34993 L2088.32395,617.34993 C2088.32395,616.23010 2089.24406,615.30999 2090.36389,615.30999 Z',
        length: '75%',
        width: 16,
        offsetCenter: [0, '5%']
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}%',
        color: 'inherit'
      },
      data: [{
        value: 85,
        name: '任务完成率'
      }]
    }]
  })

  // 初始化热门内容分析图（条形图）
  const hotContentChartInstance = echarts.init(hotContentChart.value)
  hotContentChartInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['视频1', '视频2', '视频3', '视频4', '视频5']
    },
    series: [
      {
        name: '播放量',
        type: 'bar',
        data: [320, 302, 301, 334, 390]
      }
    ]
  })

  // 初始化账号健康度图（雷达图）
  const accountHealthChartInstance = echarts.init(accountHealthChart.value)
  accountHealthChartInstance.setOption({
    radar: {
      indicator: [
        { name: '活跃度', max: 100 },
        { name: '粉丝增长', max: 100 },
        { name: '互动率', max: 100 },
        { name: '内容质量', max: 100 },
        { name: '违规风险', max: 100 }
      ]
    },
    series: [{
      type: 'radar',
      data: [
        {
          value: [85, 90, 75, 95, 88],
          name: '账号健康度'
        }
      ]
    }]
  })

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    platformChartInstance.resize()
    trendChartInstance.resize()
    taskStatusChartInstance.resize()
    hotContentChartInstance.resize()
    accountHealthChartInstance.resize()
  })
})
</script>

<style lang="scss" scoped>
.charts-row {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>